<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>display</title>
        <style type="text/css">
            h4 { text-align: center ; }
            .wrapper { border: 1px solid blue ; margin: 25px auto; width: 800px ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #ffff00 ; }

            .first { 
                /* 作为父元素，将 字体尺寸设置为零，可以避免相邻 inline-block 子元素之间的空白 */
                font-size: 0 ; 
            }

            .first>span {
                /* 因为 font-size 是可以从父元素中继承的，所以需要重新设置 font-size ，否则会导致文本不显示 */
                font-size: 18px ;
                display: inline-block ;
                width: 50% ;
                height: 50px ;
            }

            .second { font-size: 0 ; }
            .second>span { font-size: 18px ; display: inline-block ; width: 33.333333333%; height: 50px; }

            .third { font-size: 0 ; }
            .third>div { font-size: 18px ; display: inline-block ; width: 25%; height: 50px; }

            .fourth { font-size: 0 ; }
            .fourth>div { font-size: 18px ; display: inline-block ; width: 8.333333333%; height: 50px; }
        </style>
    </head>
    <body>

        <h4>将整行平均拆分为两等份</h4>
        <div class="wrapper first">
            <span class="odd">落霞与孤鹜齐飞</span>
            <span class="even">秋水共长天一色</span>
        </div>

        <h4>将整行平均拆分为三等份</h4>
        <div class="wrapper second">
            <span class="odd"></span>
            <span class="even"></span>
            <span class="odd"></span>
        </div>

        <h4>将整行平均拆分为四等份</h4>
        <div class="wrapper third">
            <div class="odd"></div>
            <div class="even"></div>
            <div class="odd"></div>
            <div class="even"></div>
        </div>

        <h4>将整行平均拆分为十二等份</h4>
        <div class="wrapper fourth">
            <div class="odd"></div>
            <div class="even"></div>
            <div class="odd"></div>
            <div class="even"></div>
            <div class="odd"></div>
            <div class="even"></div>
            <div class="odd"></div>
            <div class="even"></div>
            <div class="odd"></div>
            <div class="even"></div>
            <div class="odd"></div>
            <div class="even"></div>
        </div>
        
    </body>
</html>